interface ButtonProps {
    label: string;
    labelInfo?: string;
    type: 'text' | 'password' | 'date' | 'file';
    name: string;
    placeholder?: string;
    className?: string;
}

const defaultClasses = 'block w-full min-h-[40px] rounded-md text-base text-[#505050] border-0 px-3 py-2 ring-1 ring-inset ring-[#C5C5C5] placeholder:text-[#909090] focus:ring-1 focus:ring-inset focus:ring-[#030BA6]';

const Input: React.FC<ButtonProps> = ({ label, labelInfo, type, name, className, placeholder }) => {
    const commonProps = {
        className: `${defaultClasses} ${className}`,
    };

    return (
        <div>
            <label htmlFor={name} className="flex gap-2 justify-between text-sm font-medium leading-4 text-[#909090]">
                <div className="flex-1 text-nowrap">
                    {label}
                </div>
                {labelInfo ? (
                    <div className="text-[#C5C5C5] truncate" title={labelInfo}>
                        {labelInfo}
                    </div>
                ) : null }
            </label>
            <div className="mt-2">
                <input
                type={type}
                name={name}
                id={name}
                placeholder={placeholder}
                // autoComplete={name}
                {...commonProps}
                />
            </div>
        </div>
    );
};

export default Input;
